<template>
	<div>
		<el-form ref="form" :model="form" :rules="formRules" label-width="130px" :zIndex="999">
			<el-tabs v-model="activeName">
				<el-tab-pane label="基础信息" name="first">

					<el-form-item label="名称" prop="gasOutletName">
						<el-input v-model="form.gasOutletName" style="width: 250px;"></el-input>
					</el-form-item>
					<el-form-item label="序号" prop="gasOutletNo">
						<el-input v-model="form.gasOutletNo" style="width: 250px;"></el-input>
					</el-form-item>
					
					<el-form-item label="排放方式" prop="gasOutletApproach">
						<el-radio v-model="form.gasOutletApproach" label="ORGANIZED_OUTLET">有组织排放</el-radio>
						<el-radio v-model="form.gasOutletApproach" label="DISORGANIZED_OUTLET">无组织排放</el-radio>
					</el-form-item>

					<div style="text-align: center;">
						<el-button v-if="editData && editData.id" type="danger" @click="deleteThis">删除</el-button>
						<el-button type="primary" @click="saveOrUpdate">保存</el-button>
						<el-button @click="cancle">取消</el-button>
					</div>
				</el-tab-pane>

				<template v-if="editData">

					<el-tab-pane label="废气处置设施和工艺" name="second">
						<gasDefenceManageNew ref="gasDefenceManageNew" :outletId="editData.id"></gasDefenceManageNew>
					</el-tab-pane>

					<el-tab-pane label="排放污染物" name="three">
						<pollutionManage ref="pollutionManage" :outletId="editData.id" :editData="editData"></pollutionManage>
					</el-tab-pane>

					<el-tab-pane label="工艺图" name="four">
						<gasOutletLineSetting v-if="activeName == 'four'" ref="gasOutletLineSetting" :outletId="editData.id"
							:editData="editData"></gasOutletLineSetting>
					</el-tab-pane>

					<el-tab-pane label="在线监测对接" name="five">
						<div>
							<div class="font15 pb10 mb10" style="border-bottom: 1px solid#f5f5f5;">监测设备对接</div>

							<div style="margin: 0 auto;">
								<el-form-item label="设备唯一标识" prop="mn">
									<el-input v-model="outletMn.mn" style="width: 250px;"></el-input>
								</el-form-item>
								<el-form-item label="设备访问密码" prop="pw">
									<el-input v-model="outletMn.pw" style="width: 250px;"></el-input>
								</el-form-item>
							</div>


							<div class="textCenter">
								<el-button type="primary" style="width: 80px;" @click="updateOutletMn">保存</el-button>
							</div>
						</div>

						<div>
							<div class="font15 pb10 mb10" style="border-bottom: 1px solid#f5f5f5;">污染物对接</div>

							<div style="margin: 0 auto;">
								<el-form-item v-for="(item,index) in outletMn.pollutionList" :key="index" :label="item.pollutionName">
									<el-input v-model="item.divisorCode" style="width: 250px;" placeholder="编码"></el-input>
								</el-form-item>
							</div>


							<div class="textCenter">
								<el-button type="primary" style="width: 80px;" @click="updateOutletPollution">保存</el-button>
							</div>
						</div>

					</el-tab-pane>

					<el-tab-pane label="自行监测" name="six">
						<div>
							<el-form-item label="自行监测频率" prop="gasOutletNo">
								<el-select v-model="form2.frequency" placeholder="请选择" style="width: 250px;">
									<el-option key="MONTH" label="每月一次" value="MONTH" />
									<el-option key="QUARTER" label="每季度一次" value="QUARTER" />
									<el-option key="HALF_YEAR" label="半年一次" value="HALF_YEAR" />
									<el-option key="YEAR" label="每年一次" value="YEAR" />
								</el-select>
							</el-form-item>

							<el-form-item label="说明" prop="frequencyRemark">
								<el-input v-model="form2.frequencyRemark" type="textarea" placeholder="说明" style="width: 250px;"></el-input>
							</el-form-item>


							<div class="textCenter">
								<el-button type="primary" style="width: 80px;" @click="updateOutletSurveyFrequency">保存</el-button>
							</div>
						</div>
					</el-tab-pane>
				</template>


			</el-tabs>
		</el-form>

	</div>
</template>

<script>
	import gasDefenceManageNew from '@/components/wasteGas/gasDefenceManageNew'
	import pollutionManage from '@/components/wasteGas/pollutionManage'
	import gasOutletLineSetting from '@/components/wasteGas/gasOutletLineSetting'
	import VueQr from 'vue-qr'

	let that
	export default {
		name: 'addInfoIndex',
		components: {
			gasDefenceManageNew,
			pollutionManage,
			gasOutletLineSetting,
			VueQr
		},
		props: ['entId', 'editData'],
		data() {
			return {
				activeName: "first",
				visible2: false,
				params: {
					ticketId: '',
				},
				form: {
					gasOutletName: '',
					gasOutletNo: '',
					gasOutletHeight: '', // 排气筒高度（m）
					gasOutletTemperature: '', // 排口温度（℃）
					gasOutletPressure: '', // 压力（kPa）
					defaultOutletTime: '', // 排放时间（小时）
					defaultElectricityConsumption: '', // 耗电量（kPa）
					defaultSmokeVolume: '', // 烟气量 （m3/h）
					gasOutletApproach: 'ORGANIZED_OUTLET',
				},

				form2: {
					frequency: 'MONTH',
					frequencyName: '',
					frequencyRemark: '',
				},

				outletMn: {
					mn: '',
					pw: '',
					pollutionList: []
				},

				params: {
					"outletId": "", // 排口id
					"workStatus": "", // 运行状态
					"pollutionValueList": [],
					"baseValueList": []
				},

				dataList: [],

				formRules: {
					gasOutletName: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					gasOutletNo: [{
						required: true,
						message: '请输入编码',
						trigger: 'blur'
					}],
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			if (that.editData) {
				that.form = that.editData
				that.getDataList()
				that.getOutletMn()
				that.getOutletSurveyFrequency()
			}
		},
		methods: {
			
			getOutletSurveyFrequency(){
				that.ajax({
					url: '/gasOutlet/getOutletSurveyFrequency',
					data: {
						outletId: that.editData.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.form2 = result.data
					},
				})
			},

			getOutletMn() {
				that.ajax({
					url: '/gasOutlet/getOutletMn',
					data: {
						outletId: that.editData.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.outletMn = result.data
					},
				})
			},
			
			updateOutletSurveyFrequency(){
				that.ajax({
					url: '/gasOutlet/updateOutletSurveyFrequency',
					data: JSON.stringify(that.form2),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					}
				});
			},

			updateOutletPollution() {
				that.ajax({
					url: '/gasOutlet/updateOutletPollution',
					data: JSON.stringify({
						pollutionList: that.outletMn.pollutionList,
						outletId: that.editData.id,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					}
				});
			},

			updateOutletMn() {
				that.ajax({
					url: '/gasOutlet/updateOutletMn',
					data: JSON.stringify({
						pw: that.outletMn.pw,
						mn: that.outletMn.mn,
						outletId: that.editData.id,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					}
				});
			},

			getDataList(isShow = true) {
				that.ajax({
					url: '/gasOutletDefence/getGasDefenceListByOutletId',
					data: {
						outletId: that.editData.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dataList[that.pageIndex] = result.data
							that.totalPage = 1
							that.$forceUpdate()
							//console.log(that.dataList)
						}
					},
				}, isShow)
			},

			cancle() {
				that.$emit("cancle", true)
			},


			//删除危废
			deleteThis() {
				this.$confirm('此操作将删除此数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasOutlet/deleteGasOutletBase',
						data: {
							gasOutletBaseId: that.editData.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.status && result.data) {
								that.data = that.$options.data()
								that.$forceUpdate()
								that.$emit("deleteSuccess", true)
							}
						}
					})
				})
			},

			saveOrUpdate: function() {
				this.$refs['form'].validate(function(valid) {
					if (valid) {
						that.ajax({
							url: '/gasOutlet/saveOrUpdateGasOutletBase',
							data: JSON.stringify(that.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.status == 1 && result.data) {
									that.data = that.$options.data()
									that.$forceUpdate()
									if (that.form.id) {
										that.$emit("success", that.form.id)
									} else {
										that.$emit("success", result.data)
									}
								} else {}
							}
						});
					}
				});
			},

		}
	}
</script>

<style>

</style>